﻿@page "/components/checkbox"

<DocsPage>
    <DocsPageHeader Title="Checkbox" SubTitle="Checkboxes are a great way to allow the user to make a selection of choices from things like a list.">
        <Description>
            If you want to let the user turn a setting on or off on demand, a Switch component is recommended instead.
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Basic Checkboxes">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="CheckboxBasicExample">
                <CheckboxBasicExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Labels">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="CheckboxLabelExample">
                <CheckboxLabelExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Icons">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="CheckboxIconExample">
                <CheckboxIconExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Dense">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="CheckboxDenseExample">
                <CheckboxDenseExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Sizes">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="CheckboxSizeExample">
                <CheckboxSizeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Indeterminate State">
                <Description>
                    When you use <CodeInline>T="bool?"</CodeInline> or bind the checkbox against a nullable bool it can have an indeterminate state when the value is <CodeInline>null</CodeInline>.
                    <br />
                    In addition, the different states when the checkbox is clicked are the following (with a starting <CodeInline>null</CodeInline> value):
                    <br />
                    Indeterminate, True, False, True, False...
                    <br />
                    It is not possible to obtain the Indeterminate state again. Except by resetting the value to <CodeInline>Null</CodeInline>. Or, by setting <CodeInline>TriState="true"</CodeInline>, you can get the Indeterminate state after the False state.
                </Description>
            </SectionHeader>
            <SectionContent Code="CheckboxIndeterminateExample">
                <CheckboxIndeterminateExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Binding Checkbox Against Different Data Types">
                <Description></Description>
            </SectionHeader>
            <SectionContent  Code="CheckboxConversionExample" ShowCode="false">
                <CheckboxConversionExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="ReadOnly Mode">
                <Description>Setting <CodeInline>ReadOnly="true"</CodeInline> will make the checkbox control stop listening to user input.</Description>
            </SectionHeader>
            <SectionContent Code="CheckboxReadOnlyExample" ShowCode="false" Block="true">
                <CheckboxReadOnlyExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Keyboard Navigation">
                <Description>
                    <MudText>MudCheckBox accepts keys to keyboard navigation.</MudText>
                    <br />
                    <MudText><CodeInline>Space</CodeInline> key to toggle state true/false/(if TriState is true) indeterminate</MudText>
                    <MudText><CodeInline>Delete</CodeInline> key to set UnChecked</MudText>
                    <MudText><CodeInline>Enter</CodeInline> or <CodeInline>NumpadEnter</CodeInline> keys to set Checked</MudText>
                    <MudText><CodeInline>Backspace</CodeInline> key to set indeterminate (only TriState is true)</MudText>
                    <MudText>*Disabled or ReadOnly checkboxes cannot be changed by keys.</MudText>
                </Description>
            </SectionHeader>
            <SectionContent Code="CheckboxKeyboardNavigationExample" ShowCode="false">
                <CheckboxKeyboardNavigationExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
